<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>类别列表</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/jquery-confirm.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script type="application/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-confirm.min.js}"></script>
    <script>
        var del;
        var update;
        $(document).ready(function () {
            $("#reset").click(function () {
                window.location.href="/category/tolist"
            })
            del=function(id){
                var str="#category"+id
                $.confirm({
                    title: '确认',
                    content: '确定要【'+$(str).html()+'】删除吗?',
                    type: 'red',
                    width:'30',
                    height:'50',
                    icon: 'icon-trash-o',
                    buttons: {
                        ok: {
                            text: '确认',
                            btnClass: 'iconfont icon-ico_commodity_defaul',
                            action: function() {
                                $.get('del/'+id,function (data) {
                                            if (data){
                                                window.location.href="/category/tolist"
                                            }
                                        })


                            }
                        },
                        cancel: {
                            text: '取消',
                        }
                    }
                });
            }

            update=function (id) {
                window.location.href="/category/toupdate/"+id
            }
        })
    </script>
</head>
<body>
    <div>
        <form class="form-inline" method="post" action="/category/search">
            <div class="form-group">
                <label for="name">  <span class="iconfont icon-xingmingyonghumingnicheng"></span>类别名</label>
                <input th:value="${name}" type="text" class="form-control" id="name" name="name" placeholder="类别名">
            </div>

            <button type="submit" class="btn btn-info"> 查询</button>
            <button type="button" id="reset" class="btn btn-warning"> 重置</button>
        </form>
    </div>
<form method="post">
    <div class="panel admin-panel">
        <div class="panel-head">
            <strong class="icon-reorder"> 视频类别列表</strong>
        </div>
        <div class="padding border-bottom">
            <button type="button" class="button border-yellow"
                    onclick="javascript:location='/category/toadd'">
                <span class="icon-plus-square-o"></span>增加视频类别
            </button>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th>序号</th>
                <th>类别名称</th>
                <th>操作</th>
            </tr>

                <tr th:each="category,index:${categoryList}">
                    <td th:text="${index.count}"></td>
                    <td th:id="'category'+${category.id}"  th:text="${category.name}">${category.name}</td>
                    <td>
                        <div class="button-group">
                            <a class="button border-main"
                               th:onclick="'update('+${category.id}+')'"><span
                                    class="icon-edit" ></span> 修改</a> <a class="button border-red"
                                                                        th:onclick="'del('+${category.id}+')'"><span
                                class="icon-trash-o"></span> 删除</a>
                        </div>
                    </td>
                </tr>
        </table>
    </div>
</form>
</body>
</html>